
<template>
  <tab-bar>
    <tab-item v-for='v in  list' :key='v.path' :path='v.path' :class='[v.count ? "car":""]'>
      <img :src='v.img' slot='item-icon' />
      <img :src='v.actimg' slot='item-icon-active' />
      <div slot='item-text'>{{v.text}}
        <span v-show='v.count' class='car-num'>{{carListLength}}</span>
      </div>
    </tab-item>

  </tab-bar>
</template>

<script>
import TabBar from 'components/common/tabbar/TabBar.vue'
import TabItem from 'components/common/tabbar/TabBarItem.vue'
import { mainList } from 'common/bardata.js'

import { mapGetters } from 'vuex'
export default {
  components: { TabBar, TabItem },
  name: 'mianBar',
  data() {
    return {
      list: mainList
    }
  },
  computed: {
    ...mapGetters(['carListLength'])
  }
}
</script>

<style scoped>
.car {
  position: relative;
}
.car-num {
  position: absolute;
  top: -8px;
  right: 23px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 23px;
  text-align: center;
  color: #fff;
  background-color: red;
}
</style>